// pages/category/category.js
import { request } from "../../request/index.js";
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //左侧菜单数据
    leftMenuList:[],
    //右侧的商品数据
    rightContent:[],
    //被点击的左侧的菜单
    currentIndex:0,
    //右侧内容滚动条距离顶部的距离
    scrollTop:0

  },
  //接口的返回数据
  Cates:[],

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    /**
   * 1.先判断一下本地存储中有没有旧的数据
   * {time:Data.now(),data[...]}
   * 2.没有旧数据 直接发送新请求
   * 3.有旧的数据同时 没有过期 就是用本地存储中的旧数据
   */
  //  1 获取本地存储数据（小程序中也存在本地存储技术）
      const Cates=wx.getStorageSync("cates");
      //2. 判断
      if(!Cates){ //不存在
        this.getCates();
      }else{
        //有旧数据 定义过期时间 10s
        if(Date.now()-Cates.time>1000*10){
          this.getCates();
        }else{
          //可以使用旧数据
          this.Cates=Cates.data;
          //构造左侧的大菜单数据
          let leftMenuList=this.Cates.map(v=>v.cat_name);
          //构造右侧的商品数据
          let rightContent=this.Cates[0].children;
          this.setData({
            leftMenuList,
            rightContent
          })
        }
      }
  },
  //获取分类数据
 async getCates(){
      
    // request({
    //   url:"/categories"})
    //   .then(res =>{
    //     this.Cates=res.data.message;
    //     //把接口中的数据存入到本地存储中
    //     wx.setStorageSync("cates",{time:Date.now(),data:this.Cates})

    //     //构造左侧的大菜单数据
    //     let leftMenuList=this.Cates.map(v=>v.cat_name);

    //     //构造右侧的商品数据
    //     let rightContent=this.Cates[0].children;
    //     this.setData({
    //       leftMenuList,
    //       rightContent
    //     })
    //   })
      //使用es7的async await来发送请求
      const res = await request({url:"/categories"});
      this.Cates=res;
        //把接口中的数据存入到本地存储中
        wx.setStorageSync("cates",{time:Date.now(),data:this.Cates})

        //构造左侧的大菜单数据
        let leftMenuList=this.Cates.map(v=>v.cat_name);

        //构造右侧的商品数据
        let rightContent=this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightContent
        })

  },
  //左侧菜单的点击事件
  handleItemTap(e){
    /**
   * 1.获取被点击的标题身上的索引
   * 2.给data中的curentIndex赋值
   * 3.根据不同的索引渲染右侧的内容
   */
  const{index} = e.currentTarget.dataset;

  let rightContent=this.Cates[index].children;
  
  this.setData({
    currentIndex:index,
    rightContent,
    //重置右侧内容的scroll-view标签的距离顶部的距离
    scrollTop:0
  })
  }
  
})